<template>
    <view>
        <view class="container">
            <view class="navTitle">
                <image
                    @click="back"
                    class="icon"
                    src="@/static/mine/chevron_left.png"
                    mode="scaleToFill"
                />
                <text class="text">注册账号</text>
                <view></view>
            </view>
            <view class="header">
                <view class="h1"> 欢迎使用飞行日记 </view>
                <view class="tip"> 飞行日记里，书写自己的故事 </view>
            </view>

            <view class="main">
                <view class="inpLayout">
                    <view class="label">账号</view>
                    <input
                        :value="userNameVal"
                        type="text"
                        class="input"
                        placeholder="请输入至少3位数字、英文字母组合"
                        @input="userNameInput"
                    />
                </view>
                <view class="userNameErr">
                    {{ userNameErr }}
                </view>
                <view class="inpLayout">
                    <view class="label">密码</view>
                    <input
                        :value="pwdVal"
                        :password="isPassword"
                        type="text"
                        class="input"
                        placeholder="请输入至少6位数字、英文字母组合"
                        @input="pwdInput"
                    />
                    <image
                        @click="isPassword = !isPassword"
                        class="icon"
                        :src="
                            isPassword
                                ? '/static/mine/noLook.png'
                                : '/static/mine/look.png'
                        "
                        mode="scaleToFill"
                    />
                </view>
                <view class="pwdErr">
                    {{ pwdErr }}
                </view>
                <view class="inpLayout">
                    <view class="label">确认密码</view>
                    <input
                        :value="pwdVal_2"
                        :password="isPassword"
                        type="text"
                        class="input"
                        placeholder="请确认密码"
                        @input="pwdInput2"
                    />
                    <image
                        @click="isPassword = !isPassword"
                        class="icon"
                        :src="
                            isPassword
                                ? '/static/mine/noLook.png'
                                : '/static/mine/look.png'
                        "
                        mode="scaleToFill"
                    />
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="button" @click="confirm">立即注册并登录</view>
        </view>
    </view>
</template>

<script>
import { mapState,mapActions } from "vuex";
import { PASSWORD_RULE, USER_NAME } from "@/config/reg";
import { toast } from "@/common";
import { registerApi } from '@/servers/userServer.js';
export default {
    data() {
        return {
            userNameVal: "", // 输入框 用户名
            pwdVal: "", // 输入框 密码
            isPassword: true, // 密码加密显示
            pwdVal_2: "", // 第二次输入密码
            userNameErr: "", // 用户名出错
            pwdErr: "", // 密码出错
        };
    },
    computed: {
        ...mapState( "userStore" , ["userInfo"]),
    },
    methods: {
        ...mapActions("userStore" , ["updateUserInfoAction"]),
        back() {
            uni.navigateBack();
        },
        async confirm() {
            console.log(this.userNameVal, this.pwdVal, "pwdVal");
            const rule_user_name = USER_NAME.test(this.userNameVal);
            const rule_password = PASSWORD_RULE.test(this.pwdVal);
            const rule_password2 = PASSWORD_RULE.test(this.pwdVal_2);
            if (!this.userNameVal || !this.pwdVal || !this.pwdVal_2) {
                this.userNameErr = "*账号或密码不能为空";
                this.pwdErr = "*账号或密码不能为空";
                toast({
                    title: "账号或密码不能为空~",
                    icon: "none",
                    position: "center",
                });
                return;
            }
            if (this.pwdVal !== this.pwdVal_2) {
                this.pwdErr = "*两次密码不一致";
                toast({
                    title: "两次密码不一致~",
                    icon: "none",
                    position: "center",
                });
                return;
            }
            if (!rule_user_name || !rule_password || !rule_password2) {
                this.userNameErr = "*请检查账号或密码格式";
                this.pwdErr = "*请检查账号或密码格式";
                toast({
                    title: "请检查账号或密码格式~",
                    icon: "none",
                    position: "center",
                });
                return;
            }
            let id = this.userInfo.id
            const option = {
                user_id: id,
                username: this.userNameVal,
                password: this.pwdVal,
            };
            console.log("注册",option);
            const res = await registerApi(option);

            if (res.code !== 0) {
                this.userNameErr = "*该用户名已存在";
                toast({
                    title: res.message,
                    icon: "none",
                    position: "center",
                });
                return;
            }

            await this.updateUserInfoAction(id)
            setTimeout(() => {
                uni.switchTab({ url: "/pages/mine/mine" });
            }, 300);
        },
        userNameInput(e) {
            this.userNameVal = e.detail.value;
        },
        pwdInput(e) {
            this.pwdVal = e.detail.value;
        },
        pwdInput2(e) {
            this.pwdVal_2 = e.detail.value;
        },
    },
    onLoad() {},
};
</script>

<style lang="scss" scoped>
.container {
    padding: 42rpx;

    .navTitle {
        display: flex;
        height: 200rpx;
        justify-content: space-between;
        align-items: center;

        .icon {
            width: 48rpx;
            height: 48rpx;
        }

        .text {
            font-size: 32rpx;
            font-weight: 600;
        }
    }

    .header {
        margin-bottom: 80rpx;

        .h1 {
            font-size: 52rpx;
            font-weight: 500;
            margin-bottom: 10rpx;
        }

        .tip {
            color: #999;
            font-size: 24rpx;
        }
    }

    .main {
        position: relative;
        .inpLayout {
            display: flex;
            align-items: center;
            height: 100rpx;
            border-bottom: #ececec solid 2rpx;
            margin-bottom: 30rpx;

            .label {
                margin-right: 16rpx;
                width: 128rpx;
                font-weight: 600;
                font-size: 28rpx;
            }
            .input {
                width: 70%;
                font-size: 28rpx;
            }
            .icon {
                width: 48rpx;
                height: 48rpx;
            }
        }
        .userNameErr {
            position: absolute;
            top: 100rpx;
            right: 0;
            font-size: 20rpx;
            color: rgba(229, 69, 56, 1);
        }
        .pwdErr {
            position: absolute;
            top: 232rpx;
            right: 0;
            font-size: 20rpx;
            color: #e54538;
        }
    }
}

.footer {
    position: fixed;
    bottom: 80rpx;
    width: 80vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(10vw);

    .button {
        width: 100%;
        background: rgba(255, 242, 114, 0.7);
        height: 80rpx;
        font-size: 28rpx;
        text-align: center;
        line-height: 80rpx;
        color: #40351d;
        font-weight: 600;
        margin-bottom: 20rpx;
        border-radius: 24rpx;
    }

    .textBtn {
        color: #c2c2c2;
        font-weight: 500;
    }
}
</style>
